import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import   { actionCreators }  from './store';
import   { actionCreator as loginActionCreator }  from '../../pages/login/store';

import { 
    HeaderWrapper,
    Logo ,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button, 
    SearchWrapper,
    SearchInfo ,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem } from './style'
    
class Header extends Component {//无状态组件
    render(){
        const { focused,handleInputFocus,handleInputBlur,list,login,logout } = this.props;
        return (
            <HeaderWrapper>
                <Link to="/">
                    <Logo />
                </Link>
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    {
                    login ? <NavItem onClick={logout} className='right'>退出</NavItem> :
                    <Link to='/login'><NavItem className='right'>登录</NavItem></Link> 
                    }
                    <NavItem className='right'>
                        <div className="iconfont">&#xe636;</div>
                    </NavItem>
                    <SearchWrapper>
                            <CSSTransition 
                            in={focused}
                            timeout={200}
                            classNames='slide'
                            >
                                <NavSearch
                                className={focused ? 'focused': ''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                                ></NavSearch>
                            </CSSTransition>
                            <span className={focused ? 'focused iconfont zoom': 'iconfont zoom'}>&#xe60c;</span>
                            { this.getListArea() }
                    </SearchWrapper>  
                </Nav>
                <Addition>
                    <Link to='/write'>
                        <Button className='writting'>
                            <span className='iconfont'>&#xe600;</span>
                            写文章
                        </Button>
                    </Link>
                    <Button className='reg'>注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }

    getListArea = () => {//热门搜索框的展示
        const { focused, mouseIn, list, page,totalPage, handleMouseEnter, handleMouseLeave,handleChangePage } = this.props;
        const jsList = list.toJS();//将immutable数组转化为普通的js数组
        const pageList = [];

        if(jsList.length){//当发送了axios的请求之后才做的分页
            for (let i = (page-1) * 10 ; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
                )
            }
        }
        
        if (focused || mouseIn) {
            return (
                <SearchInfo 
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                >
                <SearchInfoTitle>
                    热门搜索
                    <SearchInfoSwitch onClick={() => handleChangePage(page,totalPage,this.spinIcon)}>
                    <span ref={(icon) => {this.spinIcon = icon}} className='iconfont spin'>&#xe851;</span>    
                    换一批</SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    {pageList}  
                </SearchInfoList>
            </SearchInfo>
            )
        }else {
            return null;
        }
    }
}

const mapStateToProps = (state) => {//将store中的state数据映射到props中去
    return {
        // focused: state.header.focused;
        //focused: state.get('header').get('focused')//immutable对象的get方法
        focused: state.getIn(['header','focused']),//与上面的代码是等价的
        list: state.getIn(['header','list']),
        page: state.getIn(['header','page']),
        totalPage: state.getIn(['header','totalPage']),
        mouseIn: state.getIn(['header','mouseIn']),
        login: state.getIn(['login','login']),
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            console.log(list);
            if(list.size ===0 ){
                const action1 = actionCreators.getList();//使用thunk中间件在actioncreator中进行异步请求
                dispatch(action1)
            }
            const action2 = actionCreators.searchFocus();
            dispatch(action2);
        },
        handleInputBlur() {
            const action = actionCreators.searchBlur();
            dispatch(action);
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page,totalPage,spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig,'');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10);
            }else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
            if(page < totalPage){
                dispatch(actionCreators.changePageList(page + 1));
            }else{
                dispatch(actionCreators.changePageList(1));
            }
        },
        logout() {
            dispatch(loginActionCreator.logout())
        }
        
    }
}
export default connect(mapStateToProps,mapDispathToProps)(Header)
